<!--最近-->
<template>
  <div id="lately" class="app-container">
    <div class="fl container__left">
      <el-input v-model="keyword" placeholder="搜索文档、正文内容、团队或用户名" clearable prefix-icon="el-icon-search">
        <i slot="suffix" class="el-input__icon el-icon-refresh" style="cursor: pointer;" @click="handlerRefresh" />
      </el-input>
      <div style="height: calc(100vh - 150px);overflow-y: auto;padding-right:20px" class="list m__top_20">
        <ul v-infinite-scroll="load" infinite-scroll-disabled="disabled">
          <li v-for="i in count" :key="i" class="list-item">
            <div class="fl item__left"><img :src="base64Images.ICON_WORD" class="icon"></div>
            <div class="fl item__body">
              <div class="title">
                智慧监所实战平台（实际方案截取）(1){{ i }}
              </div>
              <div class="desc">
                <span>1天前</span><span>来自微信</span><span>1KB</span>
              </div>
            </div>
            <div class="fr item__right">
              <ul class="document__tool">
                <li><i class="el-icon-share" title="分享" /></li>
                <li><i class="el-icon-star-off" title="收藏" /></li>
                <li>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                      <i class="el-icon-more-outline el-icon--right" title="操作" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                      <el-dropdown-item command="b">狮子头</el-dropdown-item>
                      <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                      <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                      <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>

            </div>

          </li>
        </ul>
        <p v-if="loading" class="tc" style="font-size: 13px;">加载中...</p>
        <p v-if="noMore" class="tc" style="font-size: 13px;">没有更多了</p>
      </div>
    </div>
    <div class="fr container__right">
      <ul>
        <li><i class="el-icon-share" title="分享" />上传</li>
        <li><i class="el-icon-share" title="分享" />新建文件</li>
        <li><i class="el-icon-share" title="分享" />新建文件夹</li>
        <li><i class="el-icon-share" title="分享" />新建共享文件夹</li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      count: 10,
      loading: false,
      keyword: '',
      activeName: 'person'
    }
  },
  computed: {
    noMore() {
      return this.count >= 200
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    handleSelectedTab(tab, event) {
      this.activeName = tab.name
    },
    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 20
        this.loading = false
      }, 2000)
    },
    handleCommand() {

    },
    handlerRefresh() {
    }
  }
}
</script>

<style lang="scss" >
 #lately{
   .container__left{
    width: calc(100vw - 470px);
   }
   .container__right{
     width: 190px;
     li{
      color: #417ff9;
      font-size: 12px;
      height: 38px;
      line-height: 38px;
      cursor: pointer;
      i{
        margin-right: 5px;
      }
    }
   }
    ul{
        list-style: none;
    }
    .document__tool{
        li{
            float: left;
            margin-left:15px ;
            cursor: pointer;
        }
    }
   .list{
       li:hover{
            background-color: #f9fafd;
        }
    .list-item{
        height: 65px;
        border-bottom: 1px solid #DCDFE6;
        padding: 15px;
        .icon{
            width: 30px;
            height: 30px;
        }
        .item__left{
            width: 30px;
            height: 30px;
            font-size: 30px;
            margin: 0  16px 0 0;
            min-width: 30px;
        }
        .item__body{
            .title{
                color: #3c414b;
                height: 22px;
                line-height: 22px;
                cursor: pointer;
                overflow: hidden;
                margin-right: auto;
                max-width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-wrap: normal;
                font-size: 13px;
            }
            .desc{
                color: #949aae;
                font-size: 12px;
                span{
                    margin-right: 5px;
                }
            }
        }
        .item__right{
            line-height: 30px;
        }
    }
   }
 }
</style>
